<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="1st.js"></script>
</head>

<body>
<h3>百叶窗幻灯片示例</h3>
<style type="text/css">
*{margin:0; padding:0;}
body{}
#sbox05{position:relative; padding:10px;}
#sbox05 .panel{position:relative;width:704px;height:185px;}
#sbox05 .panel a{width:704px;height:185px; display:none;}
#sbox05 .panel img{border:0;}

#sbox05 .tab{position:absolute; left:580px; top:170px; width:150px; height:20px;}
#sbox05 .tab li{background-color:#000; width:16px; height:16px; line-height:16px; text-align:center; margin:2px; float:left; border:1px solid gray; list-style:none; cursor:pointer; color:#ffffff; border:1px solid #666; font-size:12px;}
#sbox05 .tab li.focus{background-color:#f00;}
</style>
<div id="sbox05">
	<div class="panel">
		<a href="javascript:void(0);" style="display:inline;"><img src="data/img/slides/shutter/01.jpg"/></a>
		<a href="javascript:void(0);"><img src="data/img/slides/shutter/02.jpg"/></a>
		<a href="javascript:void(0);"><img src="data/img/slides/shutter/03.jpg"/></a>
		<a href="javascript:void(0);"><img src="data/img/slides/shutter/04.jpg"/></a>
		<a href="javascript:void(0);"><img src="data/img/slides/shutter/05.jpg"/></a>
	</div>
	<ul class="tab">
		<li class="focus">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>

<script type="text/javascript">F("sbox05").slides({panel:"fade",autoplay:3000});</script>
</body>
</html>
